<template>
    <div >
        <div id="head">
            <el-col :span="2">
                <i class="el-icon-house"/><el-link @click="goHome">返回主页</el-link>
            </el-col>
        </div>
        <!-- 头部空行 -->
        <el-col :span="24"><div style="height: 60px"/></el-col>
        <!-- 外层el-col -->
        <el-col :span="18" :offset="3">
            <!-- 外框 div -->
            <div id="windows">
                <!-- 分割 -->
                <el-col :span="24"><div style="height: 30px"/></el-col>
                <!-- 头部信息-名称 -->
                <el-col :span="5" :offset="1">
                    <p style="font-size: 30px">{{name}}</p>
                </el-col>
                <el-col :span="5" :offset="13">
                    <el-button @click="createCommentWindows = true">写一帖</el-button>
                </el-col>
                <!-- 分割 -->
                <el-col :span="24"><div style="height: 30px"/><hr/></el-col>
                <!-- 列表 -->
                <el-col :span="24">
                    <el-table :data="tableData" style="width: 100%" @row-click="openDetails">
                        <el-table-column prop="id" label="序号" width="80"/>
                        <el-table-column prop="title" label="标题" width="300"/>
                        <el-table-column prop="createTime" label="创建时间" width="180"/>
                        <el-table-column prop="" label="其他">
                            <template slot-scope="scope">
                                <span v-if="scope.row.top == 1"><el-tag type="danger">置顶</el-tag></span>
                                <span v-if="scope.row.start == 1"><el-tag type="warning">加精</el-tag></span>
                                <span v-if="scope.row.clock == 1"><el-tag type="success">锁定</el-tag></span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
                <!-- 分割 -->
                <el-col :span="24"><div style="height: 30px"/></el-col>
                <el-col :span="24">
                    <el-col :span="2" :offset="8">
                        <el-button @click="leftB" :disabled="page == 1"><</el-button>
                    </el-col>
                    <el-col :span="2" :offset="1"><el-input :disabled="page == 1" v-model="page"/></el-col>
                    <el-col :span="2" :offset="1">
                        <el-button @click="rightB" :disabled="page == maxPage"> > </el-button>
                    </el-col>
                </el-col>
                <!---->
                <!---->
            </div>
        </el-col>


        <el-dialog title="发布新帖" :visible.sync="createCommentWindows" width="60%" >
            <el-input v-model="newCommentTitle" placeholder="请输入标题" style="height: 50px"/>
            <el-input type="textarea" placeholder="请输入内容" v-model="newCommentContent" maxlength="100" show-word-limit/>
            <div style="height: 80px;"/>
            <!-- 更新按钮 -->
            <el-button @click="createComment"  type="success">发布</el-button>
            <!-- 取消 -->
            <el-button @click="createCommentWindows = false" >取消</el-button>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        created() {
            // 从 url 中获取板块 id
            this.plateId = this.$route.query.id;
            console.log(this.plateId);
            // 根据板块 id 获得帖子的数量
            this.$axios
                .get("/api/posts/getLong",{
                    params:{
                        plateId:this.plateId
                    }
                })
                .then(req=>{
                    const tmp = req.data.data;
                    console.log(tmp);
                    this.maxPage = Math.ceil(tmp/5);
                    console.log(this.maxPage);
                })
            // 根据板块 id 获得板块相关信息
            this.$axios
                .get("/api/plate/getById",{
                    params:{
                        id:this.plateId
                    }
                })
                .then(req=>{
                    const tmp = req.data.data;
                    this.name = tmp.name;
                })
            // 根据板块 id 获取第一页数据
            this.$axios
                .get("/api/posts/getPosts",{
                    params:{
                        plateId:this.plateId,
                        page:'1'
                    }
                })
                .then(req=>{
                    const tmp = req.data.data;
                    this.tableData = tmp;
                })
        },
        name: "Plate",
        data(){
            return{
                newCommentTitle:'',
                newCommentContent:'',
                createCommentWindows:false,
                plateId:'',
                name:'板块名称',
                page:'1',
                maxPage:'1',
                tableData:[{
                    id:'1',
                    title:'1',
                    createTime:'',
                    start:false,
                    top:false,
                    clock:false
                }]
            }
        },
        methods:{
            createComment:function(){
              this.$axios
                  .post("/api/posts/createPosts",{
                      plateId: this.plateId,
                      title: this.newCommentTitle,
                      comment: this.newCommentContent
                  })
                  .then(req=>{
                      this.$message.warning("帖子已交由管理员审核");
                      this.newCommentContent = '';
                      this.newCommentTitle = '';
                  })
              this.createCommentWindows = false;
            },
            openDetails(row){
              console.log(row.id);
              this.$router.push("/posts?id="+row.id);
            },
            goHome:function () {
                this.$router.push("/home")
            },
            leftB:function() {
                this.page = this.page - 1;
                this.getData();
            },
            rightB:function() {
                this.page = Number(this.page) + Number(1);
                this.getData();
            },
            // 新的请求
            getData:function () {
                this.$axios
                    .get("/api/posts/getPosts",{
                        params:{
                            plateId:this.plateId,
                            page:this.page
                        }
                    })
                    .then(req=>{
                        const tmp = req.data.data;
                        this.tableData = tmp;
                    })
            }
        }
    }
</script>

<style scoped>
    #head{
        width: 100%;
        height: 30px;
        background: rgba(167,171,183,0.8);
        position:fixed;
    }
    #windows{
        background-color: #f7f9fb;
        height: 750px;
        width: 100%;
        border-top: 4px #5cae97 solid; ;
    }
    #headFont{
        font-size: 30px;
        text-align: left;
    }
    #root{
        height: 100%;
        width: 100%;
        background-color: #f7f9fb;
    }
</style>
